<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/angular.js" charset="utf-8"></script>
        <style media="screen ">
            .normal {
                color: pink;
                font-size: 1em;
            }
            .active {
                color: hotpink;
                font-size: 1.2em;
            }
        </style>
    </head>
    <body ng-app="MyApp">

        <div ng-init="name='AngularJS'; ages=[1, 2, 3, 4]; obj={a: 10}">

            <h2>{{ name }}</h2>
            <h2>{{ ages[2] }}</h2>
            <h2>{{ obj.a }}</h2>

            <!-- 使用ng-repeat遍历数组 -->
            <!-- 可以直接遍历数组的元素 item in ages -->
            <!-- 可以同时遍历下标和元素，下标在前，元素在后 (index, item) in ages -->
            <ul>
                <li ng-repeat="(index, item) in ages">{{ index + ': ' + item }}</li>
            </ul>

            <ul>
                <li ng-repeat="(key, item) in obj">{{ key + ': ' + item }}</li>
            </ul>

            <!-- ng-repeat在遍历元素的时候，数组中有重复元素，会报错，需要在后面添加 track by $index -->
            <ul>
                <li ng-repeat="item in [1, 2, 3, 4, 5, 4, 3, 2, 1] track by $index">{{ item }}</li>
            </ul>


            <!-- 使用ng-class实现动态修改样式 -->
            <div ng-init="flag=true; classValue='normal';">
                <h2 ng-class="classValue">中午吃什么？</h2>

                <h2 ng-class="{true: 'normal', false: 'active'}[flag]" ng-click="flag = !flag;">
                    去吃麻辣烫？
                </h2>

                <h2 ng-class="{'normal': flag == true}">
                    根据条件，来决定还是否添加class值
                </h2>
            </div>

            <!-- 绑定获取光标的事件 -->
            <div>
                <input type="text" ng-focus="focus='快点输入！！！'" ng-blur="focus='点完你才能输入啊!'" ng-init="focus='';">
                <h3>{{ focus }}</h3>
            </div>


            <!-- ng-style对应的是标签的style属性 -->
            <!-- ng-style和ng-class不一样的 -->
            <div>
                <button ng-click="myStyle={ color: 'pink' }">pink</button>
                <button ng-click="myStyle={ color: 'hotpink' }">hotpink</button>
                <button ng-click="myStyle={ }">Clear</button>
                <h2 ng-style="myStyle">使用ng-style添加的样式</h2>
                <h2 ng-style="{fontSize: '3em', backgroundColor: 'cyan'}">aaaaaaa</h2>
            </div>

            <!-- 直接使用对象的语法 -->
            <div>
                <label for="userName">UserName: </label>
                <input id="userName" type="text" ng-model="user.name">
                <br>
                <label for="password">Password: </label>
                <input id="password" type="password" ng-model="user.pwd">
                <br>
                <h3>{{ user }}</h3>
            </div>

            <!-- ng-model实现二级联动 -->
            <div ng-init="citys={'北京': ['昌平', '朝阳'], '河北': ['保定', '廊坊']}; city='北京'; area=''; ">
                <select ng-change="area = citys[city][0]" ng-model="city">
                    <option value="{{ key }}" ng-repeat="(key, value) in citys">{{ key }}</option>
                </select>
                <select ng-model="area">
                    <option ng-repeat="item in citys[city]" value="{{ item }}">{{ item }}</option>
                </select>
                <h2>{{ city + ' ' + area }}</h2>
            </div>



            <!-- ng-bind实现数据的绑定，不会出现渲染出来的效果 -->
            <!-- 如果对网页要去较高，或者是app的首页，建议使用ng-bind -->
            <div ng-init="name='lidaze';">
                <h2 ng-bind="name"></h2>
                <h2>{{ name }}</h2>
            </div>

            <!-- ng-if决定元素是否进行渲染 -->
            <div>
                <label>
                    点我啊: <input type="checkbox" ng-model="abc" ng-init="abc=true;">
                </label>
                <p ng-if="!abc">上面必选</p>
                <p ng-show="!abc">上面必选 ng-show</p>
                <p ng-hide="abc">上面必选 ng-hide</p>
            </div>

            <!-- ng-disabled决定元素是否可用 -->
            <div>
                <label>
                    你确定个遵守吗？ <input type="checkbox" ng-model="a">
                </label>
                <button ng-disabled="!a">注册</button>
            </div>

            <!-- 使用ng-include引入其他文件 -->
            <div ng-include="'common.html'" ng-init="url='common.html';"></div>


            <div ng-controller="MyCtrl">
                <h2>{{ message }}</h2>
                <button ng-click="show()">弹框显示</button>
            </div>



            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>

        </div>

    </body>
    <script type="text/javascript">

        // 1.关联app
        var app = angular.module('MyApp', []);

        // 2.关联控制器
        app.controller('MyCtrl', ['$scope', function ($scope) {

            // 给$scope添加属性和方法
            $scope.message = '我是通过$scope添加的值';
            $scope.show = function () {
                alert('弹框');
            };

        }]);

    </script>




    <script type="text/javascript">

        // [
        //     { title: '首页', img: '', flag: true },
        //     { title: '分类', img: '', flag: false },
        //     { title: '购物车', img: '', flag: false },
        //     { title: '我的', img: '', flag: false },
        // ]



    </script>
</html>
